<template>
  <div class="source-wrap scene-edit-box">
		  <ClassifyTree @handleNodeClick="handleNodeClick"></ClassifyTree>
		  <div class="top-title">
				<span>组件列表</span>
				<div>
					<input type="text"  v-model="keywords" placeholder="请输入名称检索" @keydown="handleSearch"/>
				</div> 
		  </div>
		  <div class="source-box">
			  <div class="list-wrap">
					 <div class="float scroll min" style="height: 100%;">
						<el-scrollbar>
						  <ul class="card-ul">
								<li title="定义组件" @click="editDialogRef.openDialog(classifyId,null,'add')" >
								<div class="add">
									<el-icon>
										<Plus />
									</el-icon>
								</div>
								</li>

								<li v-for=" data in tableData" :style="li_style">
								<div class="top" >
									<img  :src="data.url"/>
									<div class="img-mask">
										<div class="opear">
											<span class="menu-col-group">
												<span class="menu-col">
													<el-icon class="icon" @click="editDialogRef.openDialog(classifyId,data,'edit')"><EditPen /></el-icon>
													<span class="hidden">编辑</span>
												</span>
												
												<span class="menu-col">
													<el-icon class="icon" @click="editFunDialogRef.openDialog(data)"><Operation /></el-icon>
													<span class="hidden">功能</span>
												</span>
												
												<span class="menu-col">
													<el-icon class="icon" @click="handleDelete(data)"><Delete /></el-icon>
													<span class="hidden" >删除</span>
												</span>
												
											</span>
										</div>
									</div>
								</div>

								<div class="bottom">
									<span>{{data.name}}</span>
								</div>
								</li>
						  </ul>
						</el-scrollbar>
					</div>
					<div class="list-paging-box" v-show="_totalPage>1">
						<el-pagination small background layout="prev, pager, next" :page-size="_pageSize" :total="_total" @current-change="currentChange" />
					</div>
			  </div>
		  </div>
		  
		<EditDialog ref="editDialogRef" @closeDialog="closed"></EditDialog>
		<EditFunDialog ref="editFunDialogRef" @closeDialog="closed"></EditFunDialog>
  </div>
  
</template>
<script lang="ts" setup>
 	import {
	  Plus,Delete,EditPen,Operation
	} from '@element-plus/icons-vue' 
	import ClassifyTree from "./components/ClassifyTree.vue";
	import EditDialog from "./components/EditDialog.vue";
	import EditFunDialog from "./components/EditFunDialog.vue";
	
	
	
	
	
	import { listForProduct,deleteForProduct} from "@/api/product";
	import { ref } from 'vue'
	
	const keywords=ref('');
	const classifyId=ref('');
	const tableData=ref([]);
	const loading = ref(false);
	const editDialogRef=ref();
	const editFunDialogRef=ref();
	
	const _cur=ref(1);
	const _total=ref(0);
	const _totalPage=ref(0);
	const _pageSize=ref(20);
	
	const currentChange=(cur:number)=>{
		_cur.value= cur;
		load();
	}
	
	const load=()=>{
		loading.value=true;
		listForProduct({
			cur:_cur.value,
			classifyId:classifyId.value?classifyId.value:'-1',
			keywords:keywords.value,
			limit:_pageSize.value
		})
		.then(({result}) => {
			 const _data=result
			_data.list.forEach(item => {
			  item['url']=import.meta.env.VITE_APP_BASE_API+'/api/v1/thumbnail/'+item.id+"?"+ new Date().getTime()
			})
			_total.value=_data.totalRow
			_totalPage.value=_data.totalPage
			tableData.value= _data.list
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	const list_type=ref('');
	const li_style=ref('');
	const handleNodeClick=(node:{})=>{
		tableData.value=[]
		list_type.value=node && node.type?node.type:''
		classifyId.value=node.id;
		setForLiStyle();
		load();
	}
	
	const handleSearch=(e)=>{
		if(e.keyCode == 13) {
			load();
		}
	}
	
	const closed=(e)=>{
		keywords.value='';
		classifyId.value=e.classifyId;
		load();
	}
	
	const setForLiStyle=()=>{
		if(list_type.value=='icon'){
			li_style.value='border-color:transparent;'
		}
		else if(list_type.value=='model'){
			li_style.value='border-color:#606475;'
		}
	}
	
	const handleDelete=(row :object)=>{
		ElMessageBox.confirm("确认删除["+row.name+"]吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  deleteForProduct({
			  	id:row.id
			  })
			  .then(() => {
				keywords.value='';
				classifyId.value=row.classifyId;
				load();
				ElMessage.success("删除成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("已取消删除"));
	}
	onMounted(() => {
		load();
	});
</script>
<style scoped>
</style>
